<template>
  <div id="container"> </div>
</template>

<script lang="js">
  import { shallowRef } from 'vue';
  // import BMapGL from 'BMapGL';

  export default {
    name: 'Amap',
    setup(){
      const map = shallowRef(null);
      return {
        map
      }
    },
    methods: {
      initBMap(){
        const {BMapGL} = window;
        if(BMapGL){
          const BMap = new BMapGL.Map('container'); // 创建Map实例
          // eslint-disable-next-line no-undef
          BMap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
          BMap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        }
      }
    },
    mounted() {
      this.initBMap()
    }
  }
</script>

<style scoped lang="less">
  #container {
    width: calc(100% - 64px);
    height: calc(100% - 72px);
    margin-top: 12px;
    margin-left: 32px;
  }
</style>
